<template>
  <u-popup
    :show="showResult"
    mode="center"
    :closeable="false"
    bgColor="transparent"
    @close="handleClose"
  >
    <view class="result-popup">
      <!-- 顶部标题 -->
      <view class="popup-header">
        <image
          :src="IMAGE_URL+'/static/master/mask-group.png'"
          style="height: 264rpx; width: 100%"
        />
        <view class="popup-header-pa">
          <view class="result-status">答题完成</view>

          <view class="result-des">
            <view class="des-box">
              <view class="des-value">05:51</view>
              <view class="des-label">答题用时</view>
            </view>
            <view style="width: 48rpx"></view>
            <view class="des-box">
              <view class="des-value">96分</view>
              <view class="des-label">总成绩</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 详细统计 -->
      <view class="stats-section">
        <view class="stat-item">
          <view class="question-type">
            <view class="line"></view>
            <text>选择题: 50</text>
          </view>
          <view class="stat-details">
            <view class="details-row">
              <text class="correct">本次答题正确数: </text>
              <text class="wrong">37题</text>
            </view>
            <view class="details-row">
              <text class="correct">本次答题错误数: </text>
              <text class="wrong">37题</text>
            </view>
          </view>
        </view>

        <view class="stat-item">
          <view class="question-type">判断题: 50</view>
          <view class="stat-details">
            <view class="details-row">
              <text class="correct">本次答题正确数: </text>
              <text class="wrong">37题</text>
            </view>
            <view class="details-row">
              <text class="correct">本次答题错误数: </text>
              <text class="wrong">37题</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="action-buttons">
        <button class="action-btn return-btn" @click="handleReturn">
          返回
        </button>
        <button class="action-btn wrong-btn" @click="handleViewWrong">
          查看错题
        </button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import appConfig from "@/config/app.js";
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  name: "ResultPopup",

  props: {
    // 控制弹窗显示
    value: {
      type: Boolean,
      default: false,
    },
    // 答题结果数据
    resultData: {
      type: Object,
      default: () => ({
        totalQuestions: 50,
        answeredQuestions: 50,
        timeUsed: "05:51",
        totalScore: 96,
        details: [
          {
            type: "选择题",
            total: 50,
            correct: 37,
            wrong: 13,
          },
          {
            type: "判断题",
            total: 50,
            correct: 37,
            wrong: 13,
          },
        ],
      }),
    },
  },

  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      showResult: false,
    };
  },

  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.showResult = newVal;
      },
    },

    showResult(newVal) {
      this.$emit("input", newVal);
    },
  },

  computed: {
    // 格式化时间显示
    formattedTime() {
      return this.resultData.timeUsed;
    },

    // 格式化分数显示
    formattedScore() {
      return `${this.resultData.totalScore}分`;
    },
  },

  methods: {
    // 关闭弹窗
    handleClose() {
      this.showResult = false;
      this.$emit("close");
    },

    // 返回首页
    handleReturn() {
      this.handleClose();
      this.$emit("return-home");
    },

    // 查看错题
    handleViewWrong() {
      this.handleClose();
      this.$emit("view-wrong");
    },

    // 更新结果数据
    updateResultData(newData) {
      this.$emit("update:resultData", {
        ...this.resultData,
        ...newData,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.result-popup {
  width: 640rpx;
  min-height: 938rpx;
  background: #ffffff;
  border-radius: 28rpx 28rpx 28rpx 28rpx;
  // overflow-y: auto;

  .popup-header {
    height: 264rpx;
    width: 100%;
    box-sizing: border-box;

    position: relative;
    .popup-header-pa {
      position: absolute;
      box-sizing: border-box;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      padding: 24rpx 0 56rpx 68rpx;
      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
      .result-status {
        font-weight: 500;
        font-size: 52rpx;
        color: #ffffff;
        margin-bottom: 28rpx;
      }
      .result-des {
        display: flex;
        align-content: center;
        .des-value {
          font-family: MiSans, MiSans;
          font-weight: 500;
          font-size: 32rpx;
          color: #ffffff;
          text-align: center;
        }
        .des-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }

  .stats-section {
    background: white;
    border-radius: 15rpx;
    padding: 28rpx;
    margin-bottom: 40rpx;

    .stat-item {
      margin-bottom: 40rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .question-type {
        margin-bottom: 18rpx;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;

        .line {
          width: 6rpx;
          height: 24rpx;
          background: #df9824;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          margin-right: 8rpx;
        }
      }

      .stat-details {
        .details-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #f6f6f6;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          padding: 20rpx;
          margin-bottom: 20rpx;
        }
        .correct {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .wrong {
          font-weight: 600;
          font-size: 28rpx;
          color: #0785cf;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    padding: 0 40rpx 28rpx 40rpx;
    gap: 20rpx;
    justify-content: space-between;

    .action-btn {
      width: 260rpx;
      height: 84rpx;

      box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(51, 51, 51, 0.16);
      border-radius: 100rpx 100rpx 100rpx 100rpx;

      font-size: 32rpx;
      border: none;
    }

    .return-btn {
      background: #ffab21;
      color: white;
    }

    .wrong-btn {
      background: #1ca8ff;
      color: white;
    }
  }
}
</style>
